import Taro, { Component } from '@tarojs/taro'
import { USER_INFO } from "@/config/storage"
import { getPage, getCount } from '@/api/productApi'
import { getCommentPage } from '@/api/commentApi'
import { goodsShareImg } from "@/api/wximagesApi"
import { toUserLoginPage } from "@/utils/page_router"
import { getAppConfig, getSharePath, verifyUserLogin } from "@/utils/storage"
import { getRandomPageNumber } from '@/utils/storage'
import {shuffle} from "@/utils/utils";

export default class FyComponent<P = {}, S = {}> extends Component<P, S> {
  state: any
  rolling: boolean

  constructor() {
    super(...arguments)
    const { params } = this.$router
    this.state = {
      id: params.id,
      opacity: 0,
      nodeKey: 0,
      nodeList: [],
      initSku: false,
      userInfo: Taro.getStorageSync(USER_INFO) || {},
      shareImg: '',
      goodsInfo: {},
      goodsList: [],
      comboList: [],
      commentRes: {},
      goodsImages: [],
      showMore: false,
      loadingStatus: true,
      buyList: [],
      shareVisible: false,
      score: Taro.getStorageSync(USER_INFO).totalScore
    }
    this.rolling = false
  }

  static options = {
    addGlobalClass: true
  }

  //  分享小程序
  onShareAppMessage() {
    return { title: this.state.goodsInfo.name, path: getSharePath() }
  }

  //  页面滚动触发事件的处理函数
  onScroll({ scrollTop }) {
    const { opacity, nodeKey, nodeList } = this.state
    const num:any = (scrollTop / 200).toFixed(2)
    const number = num >= 1 ? 1 : num
    if (opacity !== number) {
      this.setState({
        // @ts-ignore
        opacity: number
      })
    }

    if (this.rolling) {
      return false
    }

    const list = nodeList.filter(i => (scrollTop >= i.top))
    const k = list.length - 1
    if (nodeKey !== k) {
      this.setState({
        // @ts-ignore
        nodeKey: k
      })
    }
  }

  //  获取节点位置
  getNodeLocation() {
    let navBarHeight = 0
    const query = Taro.createSelectorQuery()
    const list:any = [
      { name: '商品', id: '#goods-info' },
      { name: '拼团', id: '#goods-group' },
      { name: '店铺', id: '#goods-shop' },
      { name: '评价', id: '#goods-comment' },
      { name: '详情', id: '#goods-desc' },
      { name: '推荐', id: '#goods-hot' }
    ]

    query.select('#goods-navbar').boundingClientRect(({ height }) => {
      navBarHeight = height
    })
    list.map(i => {
      query.select(i.id).boundingClientRect(rect => {
        if (rect) {
          i.top = rect.top
        }
      })
    })

    query.exec(() => {
      this.setState({
        // @ts-ignore
        nodeList: list.filter(i => {
          i.top = Math.ceil(i.top - navBarHeight)
          return !isNaN(i.top)
        })
      })
    })
  }

  //  切换节点
  onSwitchNode(item, key) {
    this.rolling = true

    this.setState({
      // @ts-ignore
      nodeKey: key
    }, () => {
      Taro.pageScrollTo({
        scrollTop: item.top,
        duration: 300
      })
    })

    setTimeout(() => {
      this.rolling = false
    }, 400)
  }

  // //  是否显示分享图
  // showShareImg(bool) {
  //   if (bool) {
  //     verifyUserLogin({
  //       success: () => {
  //         this.getGoodsShareImage()
  //         this.setState({
  //           // @ts-ignore
  //           showShareImg: true
  //         })
  //       },
  //       fail: () => {
  //         toUserLoginPage()
  //       }
  //     })
  //   } else {
  //     this.setState({
  //       // @ts-ignore
  //       showShareImg: false
  //     })
  //   }
  // }

  // //  商品分享图
  // getGoodsShareImage() {
  //   const { goodsInfo } = this.state
  //   goodsShareImg(goodsInfo).then(({ data }) => {
  //     this.setState({
  //       // @ts-ignore
  //       shareImg: data
  //     })
  //   })
  // }

  //  分页获取推荐商品
  getGoodsPage() {
    const config = getAppConfig('productRandom')
    getCount().then(res => {
      getPage({ page: config === '1' ? getRandomPageNumber() : 1, limit: 6 }).then(({ data }) => {
        this.setState({
          // @ts-ignore
          goodsList: data.list
        })
      })
    })
  }

  //  分页获取评论
  getCommentPage() {
    // const { params } = this.$router
    getCommentPage({ page: 1, limit: 8 }).then(({ data }) => {
      data.list = shuffle(data.list)
      this.setState({
        // @ts-ignore
        commentRes: data
      })
    })
  }
}
